﻿@page "/components/chips"

<DocsPage>
    <DocsPageHeader Title="Chips" SubTitle="Chips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action.">
        <Description><br />See also: <MudLink Href="/components/chipset">ChipSet</MudLink></Description>
    </DocsPageHeader>
    <DocsPageContent>
        <DocsPageSection>
            <SectionHeader Title="Basic Chips">
                <Description>The Chips, when disabled, differ from other components. Instead of using the disabled color, the opacity is lowered.</Description>
            </SectionHeader>
            <SectionContent Outlined="true" Class="mud-text-align-center">
                <ChipBasicExample />
            </SectionContent>
            <SectionSource ShowCode="false" Code="ChipBasicExample" GitHubFolderName="Chip" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader Title="Closable">
                <Description>You can change the close icon with the <CodeInline>CloseIcon</CodeInline> prop.</Description>
            </SectionHeader>
            <SectionContent Outlined="true">
                <ChipClosableExample />
            </SectionContent>
            <SectionSource ShowCode="false" Code="ChipClosableExample" GitHubFolderName="Chip" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader Title="Icons">
            </SectionHeader>
            <SectionContent Outlined="true">
                <ChipIconExample />
            </SectionContent>
            <SectionSource ShowCode="false" Code="ChipIconExample" GitHubFolderName="Chip" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader Title="Label">
                <Description>Label Chips use the default theme border-radius.</Description>
            </SectionHeader>
            <SectionContent Outlined="true">
                <ChipLabelExample />
            </SectionContent>
            <SectionSource ShowCode="false" Code="ChipLabelExample" GitHubFolderName="Chip" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader Title="Outlined">
            </SectionHeader>
            <SectionContent Outlined="true">
                <ChipOutlinedExample />
            </SectionContent>
            <SectionSource ShowCode="false" Code="ChipOutlinedExample" GitHubFolderName="Chip" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader Title="Sizes">
            </SectionHeader>
            <SectionContent Outlined="true">
                <ChipSizeExample />
            </SectionContent>
            <SectionSource ShowCode="false" Code="ChipSizeExample" GitHubFolderName="Chip" />
        </DocsPageSection>
    </DocsPageContent>
</DocsPage>
